<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        用户名： <input type="text" id="username"><br>
        密码：  <input type="password" id="password"><br>
        <button>提交</button>
    </div>
    <script>
        let btnEle = document.querySelector("button");
        let usernameEle = document.querySelector("#username");
        let passwordEle = document.querySelector("#password");
        btnEle.onclick = function (){
            let username = usernameEle.value;       //获取我们需要传输的数据
            let pwd = passwordEle.value;              //获取我们需要传输的数据
            let xhr ; 
            // 兼容处理
            if( window.XMLHttpRequest ){            //如果当前浏览器支持  XMLHttpRequest 
                xhr = new XMLHttpRequest();            //就创建一个    XMLHttpRequest  的对象类型的ajax
            } else {                                //否则
                xhr = new ActiveXObject();          //就创建一个  ie8及以下支持  ActiveXObject  的对象类型的ajax
            }
            // 打开ajax  ，传输方式为  post
            // 目标地址   ../php/post.php
            // 传输方式   异步   
            xhr.open("post","../php/post.php",true);
            // 设置请求头           当不需要传输文件时，需要设置请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //  发送ajax 需要发送的数据写到send里面
            // 以键值对的方式  `username=${username}&pwd=${pwd}`   注意，这里传输的是   字符串   数据
            xhr.send(`username=${username}&pwd=${pwd}`);
            xhr.onload = function (){               //一切准备就绪后
                let obj = JSON.parse(xhr.responseText);     //获取服务器传过来的数据并解析为json格式
                if( obj['status'] == 1 ){                   //如果服务器传过来的数据中状态码  status 为 1
                    window.location.href = 'http://www.baidu.com' ;     //跳转到目标地址
                } else if(obj['status'] == 0 ){             //否则
                    window.alert(obj['info']);              //提示错误信息
                }
            }
        }
    </script>
</body>
</html>